import React from 'react';
import { Dialog, List, Toast } from 'antd-mobile';
import SvgIcon from '@/components/SvgIcon/SvgIcon';
import './UserGroup.scss';
import { tools } from '@/constants/user';
import { useEnhanceDispatch } from '@/hooks';
import { cancelBindMobile, logout } from '@/store/modules/loginStore';
import { useNavigate } from 'react-router-dom';


const UserGroup: React.FunctionComponent = () => {
  const enhanceDispatch = useEnhanceDispatch();
  const navigate = useNavigate();
  /**
   * @description 渲染svg图标的回调函数
   * */
  const renderPrefix = (index: number) => {
    return <SvgIcon name={`tool-0${index + 1}`} width="20px" height="20px"></SvgIcon>;
  };

  /**
   * @description 点击退出登录按钮的回调函数
   * */
  const handleLogout = async () => {
    const confirm = await Dialog.confirm({ content: '确定退出登录吗?', header: '温馨提示' });
    if (!confirm) return;
    try {
      await enhanceDispatch(logout()).unwrap();
      navigate('/login');
      Toast.show({ icon: 'success', content: '退出成功' });
    } catch (rejectedValueOrSerializedError: any) {
      Toast.show(rejectedValueOrSerializedError);
    }
  };

  /**
   * @description 点击每一项list的回调函数
   * */
  const onClick = (path: string) => {
    navigate(path);
  };

  /**
   * @description 点击解除绑定按钮的回调函数
   * */
  const handleCancelBind = async () => {
    const confirm = await Dialog.confirm({ content: '确定解除QQ绑定吗?', header: '温馨提示' });
    if (!confirm) return;
    try {
      await enhanceDispatch(cancelBindMobile('13237429584')).unwrap();
      Toast.show({ icon: 'success', content: '解绑成功' });
    } catch (rejectedValueOrSerializedError: any) {
      Toast.show(rejectedValueOrSerializedError);
    }
  };
  return (
    <div className="user-group">
      <h3>快捷工具</h3>
      <List>
        {
          tools.map((item, index) => {
            return (
              <List.Item clickable key={item.label} prefix={renderPrefix(index)} arrowIcon onClick={() => onClick(item.path)}>{item.label}</List.Item>
            );
          })
        }
      </List>
      <span className="logout" onClick={handleLogout}>退出登录</span>
      <span className="logout" onClick={handleCancelBind}>解除QQ绑定</span>

    </div>
  );
};

export default UserGroup;